<template>
    <div class="app-container">
        <div style="display: flex;justify-content: space-between;">
            <div class="col-body" style="width: 280px;"  v-loading="roleLoading">
                <div class="tree-add">
                    <el-button type="primary" size="small" @click="onButton('add')">增加</el-button>
                </div>
                <div class="mx-1" size="large">组织架构</div>
                <div class="blank line"></div>
                <el-input v-model="treeSearch" style="width: 100%" placeholder="请输入关键词" @input="onTreeSearch" />
                <div class="blank"></div>
                <div class="custom-scrollbar" :style="{ height: Height + 'px' }">
                    <el-tree ref="myTree" :data="treeData" :expand-on-click-node="false" node-key="id"
                        check-on-click-node highlight-current default-expand-all :filter-node-method="onTreeFilter"
                        :props="{ isLeaf: 'leaf' }" @node-click="onTreeClick">
                        <template #default="{ node, data }">
                            <div :class="'tree-node ' + (node.isCurrent ? 'active' : '')">
                                <span>{{ node.label }}</span>
                            </div>
                        </template>
                    </el-tree>
                </div>
                <div class="blank"></div>
            </div>
            <div class="col-body"  :style="{ height: HeightTable + 'px',width: 'calc(100% - 300px)' }"  v-loading="Loading">
                <div class="info-edit" @click="onButton('edit')" v-show="showEdit">
                    <el-button type="primary">编辑</el-button>
                </div>
                <div class="mx-1" size="large">组织详情</div>
                <div class="blank"></div>
                <table class="info-list">
                    <tbody v-if="editData.id">
                        <tr v-if="editDatas.parent">
                            <td class="_title">上级组织</td>
                            <td>{{ editDatas.parent.name || "无" }}</td>
                        </tr>
                        <tr>
                            <td class="_title">组织名称</td>
                            <td>{{ editData.name || "无" }}</td>
                        </tr>
                        <tr>
                            <td class="_title">组织代码</td>
                            <td>{{ editData.code || "无" }}</td>
                        </tr>
                        <tr>
                            <td class="_title">在职人数</td>
                            <td>{{ "无" }}</td>
                        </tr>
                        <tr>
                            <td class="_title">下级组织数</td>
                            <td>{{ editData.deptCount || "无" }}</td>
                        </tr>
                        <tr>
                            <td class="_title">组织地址</td>
                            <td>{{ editData.orgAddress || "无" }}</td>
                        </tr>
                        <tr>
                            <td class="_title">组织性质</td>
                            <td>{{ editData.nature || "无" }}</td>
                        </tr>
                        <tr>
                            <td class="_title">组织ip</td>
                            <td>{{ editData.ip || "无" }}</td>
                        </tr>
                        <tr>
                            <td class="_title">组织描述</td>
                            <td>{{ editData.remark || "无" }}</td>
                        </tr>
                        <tr>
                            <td class="_title">联系电话</td>
                            <td>{{ editData.phone || "无" }}</td>
                        </tr>
                        <!-- <tr>
                  <td class="_title">组织状态</td>
                  <td>{{ editData.enabled ? "启用" : "停用" }}</td>
                </tr> -->
                    </tbody>
                    <tbody v-else>
                        <tr>
                            <td class="_title">组织名称</td>
                            <td>九亭派出所</td>
                        </tr>
                        <tr>
                            <td class="_title">组织代码</td>
                            <td>1000000000</td>
                        </tr>
                        <tr>
                            <td class="_title">地址</td>
                            <td>上海松江区九亭镇</td>
                        </tr>
                        <tr>
                            <td class="_title">机构分类</td>
                            <td>派出所</td>
                        </tr>
                        <tr>
                            <td class="_title">在职人数</td>
                            <td>无</td>
                        </tr>
                        <tr>
                            <td class="_title">下级组织数</td>
                            <td>无</td>
                        </tr>
                        <tr>
                            <td class="_title">组织地址</td>
                            <td>无</td>
                        </tr>
                        <tr>
                            <td class="_title">组织性质</td>
                            <td>无</td>
                        </tr>
                        <tr>
                            <td class="_title">组织ip</td>
                            <td>无</td>
                        </tr>
                        <tr>
                            <td class="_title">组织描述</td>
                            <td>无</td>
                        </tr>
                        <tr>
                            <td class="_title">联系电话</td>
                            <td>无</td>
                        </tr>
                    </tbody>
                </table>
                <div class="blank"></div>
            </div>
        </div>
        <el-dialog :visible.sync="addWinShow" :title="zztitle" width="500px" draggable  v-loading="addLoading">
            <el-form ref="addForm" :model="addRules.form" :rules="addRules.data" label-width="90px">
                <el-form-item label="上级组织">
                    <treeselect v-model="addRules.form.pid" :options="treeData" clearable @node-click="onSelectClick"
                        placeholder="请选择" />
                </el-form-item>
                <el-form-item label="组织名称" prop="name">
                    <el-input v-model="addRules.form.name" placeholder="请输入组织名称" clearable />
                </el-form-item>
                <el-form-item label="组织代码" prop="code">
                    <el-input v-model="addRules.form.code" placeholder="请输入组织代码" clearable />
                </el-form-item>
                <el-form-item label="组织地址">
                    <el-input v-model="addRules.form.orgAddress" placeholder="请输入组织地址" clearable />
                </el-form-item>
                <el-form-item label="组织性质">
                    <el-input v-model="addRules.form.nature" placeholder="请输入组织性质" clearable />
                </el-form-item>
                <el-form-item label="组织类型">
                    <el-input v-model="addRules.form.orgTypeName" placeholder="请输入组织类型" clearable />
                </el-form-item>
                <el-form-item label="组织IP">
                    <el-input v-model="addRules.form.ip" placeholder="请输入组织IP" clearable />
                </el-form-item>
                <el-form-item label="组织描述">
                    <el-input v-model="addRules.form.remark" placeholder="请输入组织描述" clearable />
                </el-form-item>
                <el-form-item label="联系电话" prop="phone">
                    <el-input v-model="addRules.form.phone" placeholder="请输入联系电话" clearable />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="addWinShow = false">取消</el-button>
                    <el-button type="primary" @click="onSubmit('addForm')">保存</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script>
import { dept, AddDept, findById } from '@/api/organization'
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
    components: {
        Treeselect
    },
    data() {
        return {
            roleLoading:false,
            Loading:false,
            addLoading:false,
            Height: window.innerHeight - 250,
            HeightTable: window.innerHeight - 90,
            showEdit: false,
            treeData: [],
            zztitle: "新增组织",
            tableData: [],
            addWinShow: false,
            treeSearch: '',
            addRules: {
                form: {
                    name0: "",
                    pid: null,
                    name: "",
                    // enabled: true,
                    // duty: "",
                    //组织地址
                    orgAddress: "",
                    //组织代买
                    code: "",
                    //组织类型
                    orgTypeName: "",
                    //组织电话
                    phone: "",
                    ip: "",
                    remark: "",
                    nature: "",
                },
                data: {
                    name: [
                        {
                            required: true,
                            message: "请输入组织名称",
                            trigger: "blur",
                        },
                    ],
                    orgName: [
                        {
                            required: true,
                            message: "请输入组织名称",
                            trigger: "blur",
                        },
                    ],
                    code: [
                        {
                            required: true,
                            message: "请输入组织代码",
                            trigger: "blur",
                        },
                    ],
                    orgAddress: [
                        {
                            required: true,
                            message: "请输入组织地址",
                            trigger: "blur",
                        },
                    ],
                },
            },
            editData: {},
            editDatas: {},
        };
    },
    mounted() {
        this.doGetDeptList();
    },
    methods: {
        onTreeSearch(text) {
            this.$refs.myTree.filter(text);
        },
        onTreeFilter(text, data) {
            if (!text) return true;
            return data.label.includes(text);
        },
        async onTreeClick(data, node) {
            this.Loading = true;
            findById(data.id).then((res) => {
                this.editDatas = data;
                this.editData = res.data;
                if (node) {
                    data.parent = node.parent.data; //上级组织
                }

                if (data.id > 0) {
                    this.showEdit = true;
                } else {
                    this.showEdit = false;
                }
                this.Loading = false
            }).catch((err) => {
                this.Loading = false
            })

        },
        onSelectClick(data, node) {
            this.$refs.mySelect.blur();
            this.addRules.form.pid = data.id;
        },
        onButton(type, li) {
            console.log(type)
            this.addWinShow = true;
            switch (type) {
                case "add":
                    this.zztitle = "新增组织";
                    this.editData = {};
                    Object.keys(this.addRules.form).forEach((key) => {
                        this.addRules.form[key] = "";
                    });
                    this.addRules.form.pid = null;
                    break;
                case "edit":
                    this.zztitle = "编辑组织";
                    this.addRules.form = {
                        pid: this.editData.pid || 0,
                        name: this.editData.name,
                        code: this.editData.code,
                        orgAddress: this.editData.orgAddress,
                        nature: this.editData.nature,
                        ip: this.editData.ip,
                        remark: this.editData.remark,
                        phone: this.editData.phone,
                        orgTypeName: this.editData.orgTypeName,

                        // enabled: this.editData.enabled,
                    };
                    break;
            }
        },
        onSubmit(refname) {
            this.$refs[refname].validate((valid) => {
                if (valid) {
                    this.addLoading = true
                    let form = Object.assign({}, this.addRules.form);
                    let type = "put";
                    delete form.name0;
                    if (this.editData.id > 0) {
                        //修改内容
                        form.id = this.editData.id;
                    } else {
                        //新增内容
                        delete form.id;
                        // form.id = 0;
                        type = "post";
                    }
                    if (form.pid > 0) {
                        form.isTop = "0";
                    } else {
                        form.pid = 0;
                        form.isTop = "1";
                    }
                    AddDept(type, form).then((res) => {
                        this.$message({
                            message: "保存成功",
                            type: "success",
                        });
                        this.addLoading = false
                        this.doGetDeptList();
                        
                    }).catch((err)=>{
                        this.addLoading = false
                    })
                    this.addWinShow = false;
                }
            });
        },
        async doGetDeptList() {
            this.roleLoading = true
            let getData = async (pid) => {
                let list = await this.getDeptList(pid);
                for (let i = 0; i < list.length; i++) {
                    const li = list[i];
                    if (li.hasChildren) {
                        list[i].children = await getData(li.id);
                    }
                }
                return list;
            };
            let list = await getData(0);
            if (list) {
                this.treeData = list;
                this.treeData.hasChildren = true;
            }
            this.roleLoading = false
            this.$refs.myTree.setCurrentKey(0);
            this.onTreeClick(this.treeData[0]);
        },
        async getDeptList(pid) {
            pid = pid > 0 ? `pid=${pid}&` : ``;
            // let result = await request.get(`/api/crm/dept?${pid}size=100`, {
            //   loading: false,
            // });
            let result;
            await dept(pid).then((res) => {
                result = res;
            })
            return Promise.resolve(result.data.content);
        },
    },
};
</script>

<style lang="scss" scoped>
.blank {
    height: 20px;
}

.blank.line {
    height: auto;
    padding-top: 10px;
    margin-bottom: 10px;
    border-bottom: 1px #ebeef5 solid;
}

.col-body {
    position: relative;
    padding: 20px;
    background: #ffffff;

    .custom-scrollbar {
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #0000 #0000;

        &::-webkit-scrollbar {
            width: 1px;
        }

        &::-webkit-scrollbar-thumb {
            background-color: #0000;
            border-radius: 3px;
        }

        &::-webkit-scrollbar-track {
            background-color: #0000;
        }
    }
}

.tree-add {
    position: absolute;
    right: 20px;
    top: 10px;
}

.tree-node {
    display: flex;
    align-items: center;
}

.tree-node>span {
    display: block;
}

.tree-node>span:first-child {
    margin-right: 5px;
    font-size: 16px;
}

.tree-node.active {
    color: #409eff;
}

.info-edit {
    position: absolute;
    right: 20px;
    color: #409eff;
    cursor: pointer;
}

.info-list>div {
    margin-bottom: 10px;
}

.info-list,
.info-list tbody,
.info-list tr {
    display: block;
    width: 100%;
}

.info-list {
    border-left: 1px #ebeef5 solid;
    border-top: 1px #ebeef5 solid;
    font-size: 14px;
}

.info-list tr {
    display: flex;
    border-bottom: 1px #ebeef5 solid;
}

.info-list tr td {
    flex: 1;
    border-right: 1px #ebeef5 solid;
    padding: 10px;
    color: #606266;
}

.info-list tr td._title {
    flex: none;
    width: 100px;
    color: #303133;
    text-align: center;
}

//在全局设置
.app-container ::v-deep input[aria-hidden=true] {
    display: none !important;
}
.app-container ::v-deep .el-dialog{
    margin-top: 5vh !important;
}
</style>